<template>
  <div style="bottom:0.50rem" >
    <v-touch @panstart.prevent="panStart"
             @panmove.prevent="panMove"
             @panend.prevent="panEnd">

      <div :style="{transform:`translateY(${100 + downFreshDistance}px)`}" style="z-index:100;width:3.75rem;height:16rem;background-color: #000000;" class="container">

      </div>
    </v-touch>
    <div class="mw-row-style" style="position:relative;width:3.75rem;height:1rem;" :style="{transform:`translateY(${downFreshDistance}px)`}">
      <img :src="cat_image" style="height:0.26rem;width:0.3rem;bottom:0.3rem;position: absolute;left:1.725rem;"></img>
      <div :class="{myanimation:isactive}" style="position: absolute;left:1.575rem;bottom:0.11rem;width:0.6rem;height:0.6rem;">
        <!--<img :style="{bottom:cat_circle_bottom + 'px'}" src="/static/cat_circle.png" style="height:0.04rem;width:0.04rem;left:0.28rem;position: absolute;"></img>-->
      <div :style="{bottom:cat_circle_bottom + 'px'}" style="left:0.28rem;position: absolute;width:0.04rem;height:0.04rem;background-color: #000000;border-radius: 0.02rem;"></div>
      </div>

    </div>
  </div>


</template>

<script>
  import utils from '../../utils'
  export default {
    data() {
      return {
        cat_circle_bottom:23,
        downFreshDistance:-100,
        cat_rotate:0,
        transitiontime:0,
        touchStart:0,
        isactive:false,
        cat_image:"/static/cat_complete.png",
      }
    },
    methods:{
      panStart(e) {
        e.preventDefault();
        this.touchStart = e.center.y;

      },
      panMove(e) {
        e.preventDefault();
        if (this.downFreshDistance < -50) {
          this.downFreshDistance = e.center.y - this.touchStart - 100;
        } else if (this.downFreshDistance >= -50 && this.downFreshDistance < 0) {
          this.downFreshDistance = e.center.y - this.touchStart - 100;
          this.cat_circle_bottom = 23 - (23 / 50) * (e.center.y - this.touchStart - 50)
          this.cat_image = "/static/cat_down.png"
        } else if (this.downFreshDistance >= 0){
          this.cat_image = "/static/cat_refresh.png"
        }
      },
      panEnd(e) {
        e.preventDefault();
//        this.transitiontime = 1;
        var that =this
        this.isactive = true

        setTimeout(function(){
          that.isactive = false
          that.cat_image = "/static/cat_complete.png"
          that.cat_circle_bottom = 23
          setTimeout(function(){
            that.downFreshDistance = -100
            utils.toast("刷新成功")
          },500);
        },5000);
//        this.changeState();

      },
      changeState(){
        debugger
        var that = this
//        that.transitiontime = 0;
        setTimeout(function(){
          if (that.jishu % 2 == 0) {
            that.cat_rotate = -128;
          } else if (that.jishu % 2 == 1) {
            that.cat_rotate = -360;
          }
          that.jishu  = that.jishu + 1
          that.changeState()
        },that.transitiontime * 1000);

      }
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style >
  .myanimation {
  animation:mymove 0.8s ease-in-out infinite;
  }

  @keyframes mymove {
    0% {
      transform: rotate(0deg)
    }
    100% {
      transform: rotate(360deg)
    }

  }
</style>
